import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { Modal, Button, Select, Tag } from 'antd';

import styels from './index.less';

const TagsBlock: React.FC<any> = (props) => {
  const { dataSource, removeCurrentTag } = props;
  const createTagsDom = useMemo(() => {
    return (
      <>
        {dataSource.map((item: any, index: number) => (
          <Tag
            key={item.value}
            closable
            onClose={(e) => {
              e.preventDefault();
              removeCurrentTag(item.value);
            }}
          >
            {item.label}
          </Tag>
        ))}
      </>
    );
  }, [dataSource]);

  return (
    <div className={styels.container}>
      <div>当前已选择了{dataSource.length}项</div>
      <div>{createTagsDom}</div>
    </div>
  );
};

export default TagsBlock;
